import React, { useEffect, useState } from "react";
// import Myfooter from "../../components/Myffoter/Myfooter";
// import Myfooter from "../../components/Myffoter/Index";
import styles from "./Index.module.css";
import { Avatar, SearchBar, Swiper } from "antd-mobile";
// import { BellOutline } from "antd-mobile-icons";
// import Myswiper from "../../components/Myswiper/Index";
import Mytab from "../../components/Mytab/Index";
import { useNavigate } from "react-router-dom";
import Myfooter from '../../components/Myffoter/Index'
import instance from "../../api/request";
import { UserCircleOutline } from "antd-mobile-icons";
import Dao from "../../Hoc/Dao";
function Index() {
  const touxiang=localStorage.getItem('headPic') ? localStorage.getItem('headPic') : <UserCircleOutline />
  console.log('头像URL:', touxiang);
  const nav=useNavigate()
  const [img, setImg] = useState([]);
  const [zixun, setZixun] = useState([]);
  const getday = () => {
    instance.get("/api/share/v1/bannersShow").then((res) => {
      console.log("轮播图数据:", res);
      setImg(res.data.result);
    });
  };

  const getzixun = () => {
    instance.get("/api/share/knowledgeBase/v1/findDepartment").then((res) => {
      console.log(res);
      setZixun(res.data.result);
    });
  };

  useEffect(() => {
    getday();
    getzixun();
  }, []);

  return (
    <div className={styles.zong}>
      <div className={styles.ding}>
        <div className={styles.wen} onClick={()=>nav('/login')}>
          <Avatar src={touxiang} style={{ "--border-radius": "50%" }}  />
        </div>

        <div className={styles.search}>
          <SearchBar onFocus={()=>nav('/search')} placeholder="症状、药品名称、医生名字" />
        </div>

        <div className={styles.icon}>
          <img src="./ling.png" alt="" />
        </div>

      </div>

      <div className={styles.homxia}>
        <div className={styles.lunb}>
          <Swiper className={styles.swipper} style={{ width: "100vw", height: "160px" }} loop autoplay>
            {img.map((item, index) => {
              return (
                <Swiper.Item key={index} className={styles.swiper}>
                  <img
                    style={{ width: "100%", height: "100%" }}
                    src={item.imageUrl}
                    alt=""
                  />
                </Swiper.Item>
              );
            })}
          </Swiper>
        </div>
        <div className={styles.wenz}>
          <div>
            <img src="./wen.jpg" alt="" />
          </div>
          <div className={styles.zi}>知识宝典</div>
        </div>


        <div className={styles.lf}>
          <div className={styles.fang1} onClick={()=>nav('/keshilist')}>
            <span style={{ marginTop: "19px", marginLeft: "11px" }}>
              常见病症
            </span>
            <img
              style={{ width: "180px", height: "160px" }}
              src="./fang.png"
              alt=""
            />
          </div>

          <div className={styles.fang2}>
            <span style={{ marginTop: "19px", marginLeft: "11px" }}>
              常用药品
            </span>
            <img
              style={{ width: "180px", height: "160px" }}
              src="./fangy.png"
              alt=""
            />
          </div>
        </div>

        <div className={styles.wenz}>
          <div>
            <img src="./wen.jpg" alt="" />
          </div>
          <div className={styles.zi}>问诊咨询</div>
        </div>

        <div className={styles.gong}>
          {zixun.map((item, index) => {
            return (
              <div key={index} className="tug" onClick={()=>nav('/wen')}>
                <img
                  style={{
                    width: "60px",
                    height: "50px",
                    marginLeft: "10px",
                    marginTop: "11px",
                  }}
                  src={item.pic}
                  alt=""
                />
                <p style={{ marginLeft: "20px" }}>{item.departmentName}</p>
              </div>
            );
          })}
        </div>

        <div className={styles.wenz}>
          <div>
            <img src="./wen.jpg" alt="" />
          </div>
          <div className={styles.zi}>健康评测</div>
        </div>
        <div>
          <img style={{ width: "100vw" }} src="./datu.png" alt="" />
        </div>

        <div className={styles.wenz}>
          <div>
            <img src="./wen.jpg" alt="" />
          </div>
          <div className={styles.zi}>健康咨询</div>
        </div>
        <div>
          <Mytab />
        </div>

        <div>
           <Myfooter />
        </div>


      </div>
      
    </div>
  );
}

export default Dao(Index);

